import { View, Text, TouchableOpacity, StyleSheet, Platform } from "react-native"
import { ChevronLeft, ChevronRight } from "lucide-react-native"
import { theme } from "../../constants/theme"
import { LinearGradient } from "expo-linear-gradient"

interface BottomNavigationProps {
    currentIndex: number
    totalCount: number
    onPrevPress: () => void
    onNextPress: () => void
}

export function BottomNavigation({ currentIndex, totalCount, onPrevPress, onNextPress }: BottomNavigationProps) {
    const isFirstWord = currentIndex === 0
    const isLastWord = currentIndex === totalCount - 1

    return (
        <View style={styles.footer}>
            <TouchableOpacity
                style={[styles.navButton, isFirstWord && styles.navButtonDisabled]}
                onPress={onPrevPress}
                disabled={isFirstWord}
            >
                <LinearGradient
                    colors={isFirstWord ? ["#E0E0E0", "#F0F0F0"] : ["#6B9BFF", "#5B8EF4"]}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={styles.navButtonGradient}
                >
                    <ChevronLeft size={20} color={isFirstWord ? theme.colors.neutral.gray : theme.colors.neutral.white} />
                    <Text style={[styles.navButtonText, isFirstWord && styles.navButtonTextDisabled]}>上一个</Text>
                </LinearGradient>
            </TouchableOpacity>

            <View style={styles.wordCounter}>
                <Text style={styles.wordCounterText}>
                    {currentIndex + 1}/{totalCount}
                </Text>
            </View>

            <TouchableOpacity
                style={[styles.navButton, isLastWord && styles.navButtonDisabled]}
                onPress={onNextPress}
                disabled={isLastWord}
            >
                <LinearGradient
                    colors={isLastWord ? ["#E0E0E0", "#F0F0F0"] : ["#6B9BFF", "#5B8EF4"]}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={styles.navButtonGradient}
                >
                    <Text style={[styles.navButtonText, isLastWord && styles.navButtonTextDisabled]}>下一个</Text>
                    <ChevronRight size={20} color={isLastWord ? theme.colors.neutral.gray : theme.colors.neutral.white} />
                </LinearGradient>
            </TouchableOpacity>
        </View>
    )
}

const styles:any = StyleSheet.create({
    footer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        paddingBottom: Platform.OS === "ios" ? 34 : theme.spacing.lg,
        backgroundColor: theme.colors.neutral.white,
        borderTopWidth: 1,
        borderTopColor: theme.colors.neutral.lightGray,
    },
    navButton: {
        flex: 1,
        height: 44,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    navButtonDisabled: {
        opacity: 0.7,
        ...Platform.select({
            ios: {
                shadowOpacity: 0.1,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    navButtonGradient: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.md,
        height: "100%",
    },
    navButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
        marginHorizontal: theme.spacing.xs,
    },
    navButtonTextDisabled: {
        color: theme.colors.neutral.gray,
    },
    wordCounter: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.medium,
        marginHorizontal: theme.spacing.md,
    },
    wordCounterText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
})

